import Vue from 'vue'
import XEUtils from 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import VXETablePluginElement from 'vxe-table-plugin-element'
import 'vxe-table-plugin-element/dist/style.css'
import XEClipboard from 'xe-clipboard'
import Store from '@/store'

//(全局) 格式化
VXETable.formats.add('toDateString', ({ cellValue }, format) => {
    return XEUtils.toDateString(cellValue, format)
})
//(全局) 快捷菜单
VXETable.menus.add('copy', (params, event) => {
    let { $grid, menu, row, column } = params
    if (row && column) {
        if (XEClipboard.copy(row[column.property])) {
            VXETable.modal.message({
                message: "已复制到剪贴板！",
                status: "success",
            });
        }
    }
    // 读取自定义的参数
    //$table.insert(menu.record)
})
//(全局) 快捷菜单
VXETable.menus.add('insert', (params, event) => {
    let { $grid, menu, row, column } = params
    $grid.insertAt(null, -1).then(({ row }) => {
        //$grid.setActiveCell(row, "B_ItemType");
        $grid.setCurrentRow(row);
    });
})
//(全局) 快捷菜单
VXETable.menus.add('remove', (params, event) => {
    let { $grid, menu, row, column } = params
    if (row && column) {
        $grid.remove(row);
    }
})
//(全局) 快捷菜单
VXETable.menus.add('clear', (params, event) => {
    let { $grid, menu, row, column } = params
    if (row && column) {
        $grid.clearData(row, column.property);
    }
})
//(全局) 渲染器
VXETable.renderer.add('dataitem', {
    //内容渲染
    renderDefault(h, renderOpts, params) {
        let { code } = renderOpts
        let { row, column } = params
        //字符串处理
        let cellValue = row[column.property] + '';
        if (cellValue === '') return;
        let rest;
        //数据字典
        if (code) {
            let temp = Store.getters.dataitemlist;
            let options = temp.filter(c => c.B_ItemCode === code);
            //遍历自定义数据匹配（支持树型）
            rest = XEUtils.findTree(
                options,
                item => item['value'] === cellValue,
                { children: 'children' }
            )
        }
        return rest ? [
            <el-tag>{rest.item['label']}</el-tag> 
        ] : [];
    }
})
//(全局) 渲染器
VXETable.renderer.add('customData', {
    //内容渲染
    renderDefault(h, renderOpts, params) {
        let { options, optionProps } = renderOpts
        let { row, column } = params
        //字符串处理
        let cellValue = row[column.property] + '';
        if (cellValue === '') return;
        //遍历自定义数据匹配（支持树型）
        const rest = XEUtils.findTree(
            options,
            item => item[optionProps.matchKey] === cellValue,
            { children: 'children' }
        )
        return rest ? [
            <el-tag type='success'>{rest.item[optionProps.key]}</el-tag> 
        ] : [];
    }
})
//(全局) 渲染器
VXETable.renderer.add('manaframe', {
    //内容渲染
    renderDefault(h, renderOpts, params) {
        let { row, column } = params
        //字符串处理
        let cellValue = row[column.property] + '';
        if (cellValue === '') return;
        //组织架构
        let options = Store.getters.manalist;
        //遍历自定义数据匹配（支持树型）
        let rest = XEUtils.findTree(
            options,
            item => item['B_ManaframeId'] === cellValue,
            { children: 'children' }
        )
        return rest ? [
            <el-tag type='warning'>{rest.item['B_FullName']}</el-tag> 
        ] : [];
    }
})
//(全局) 渲染器
VXETable.renderer.add('department', {
    //内容渲染
    renderDefault(h, renderOpts, params) {
        let { row, column } = params
        //字符串处理
        let cellValue = row[column.property] + '';
        if (cellValue === '') return;
        //部门
        let options = Store.getters.deplist;
        //遍历自定义数据匹配（支持树型）
        let rest = XEUtils.findTree(
            options,
            item => item['B_DepartmentId'] === cellValue,
            { children: 'children' }
        )
        return rest ? [
            <el-tag type='warning'>{rest.item['B_FullName']}</el-tag> 
        ] : [];
    }
})
//(全局) 渲染器
VXETable.renderer.add('imgView', {
    //内容渲染
    renderDefault(h, renderOpts, params) {
        let { options, optionProps } = renderOpts
        let { row, column } = params
        let cellValue = row[column.property];
        let imgUrl = Store.state.app.root + 'adminApi/Utility/PreviewPic?VirtualPath=' + cellValue;
        return cellValue ? [
            <el-image 
                style='width: 100px; height: 100px'
                src={imgUrl}
                preview-src-list={[imgUrl]}>
            </el-image>
        ] : [<span>无</span>];
    }
})
//vxe-table全局配置
VXETable.setup({
    // 版本号（对于某些带 Storage 数据储存的功能有用到，上升版本号可以用于重置 Storage 数据）
    version: 0,
    // 默认表格参数
    table: {
        size: 'mini',
        showOverflow: true,
        showHeaderOverflow: true,
        showFooterOverflow: true,
        align: "center",
        headerAlign: null,
        stripe: true,//与tree-config冲突
        border: true,
        resizable: true,
        fit: true,
        showHeader: true,
        highlightCurrentRow: true,
        highlightHoverRow: true,
        highlightCurrentColumn: true,
        highlightHoverColumn: true,
        keepSource: true,   //保持原始值的状态，被某些功能所依赖，比如编辑状态、还原数据等
        zIndex: 100, // 全局 zIndex 起始值
        round: true, //是否为圆角边框
        rowId: '_XID',
        // 导出默认参数
        exportConfig: {
            isPrint: true,
            modes: ['current', 'selected', 'all'],
            original: false
        },
        // 导入默认参数
        importConfig: {
            modes: ['insert', 'covering']
        },
        radioConfig: {
            trigger: 'default'
        },
        checkboxConfig: {
            strict: true,
            //highlight: true,
            trigger: 'row'
        },
        // 默认排序配置
        sortConfig: {
            remote: false, //所有列是否使用服务端排序，如果设置为 true 则不会对数据进行处理
            trigger: 'cell',
            orders: ['asc', 'desc']
        },
        filterConfig: {
            remote: false
        },
        expandConfig: {
            trigger: 'default',
            iconOpen: 'fa fa-minus-square',
            iconClose: 'fa fa-plus-square'
            // 懒加载展开会冲突
            // accordion: true
        },
        // 树型默认配置
        treeConfig: {
            children: 'children',
            hasChild: 'hasChild',
            indent: 20,
            expandAll: true
        },
        tooltipConfig: {
            theme: 'dark'
        },
        // 可编辑默认配置
        editConfig: {
            trigger: 'click',
            mode: 'cell',
            icon: 'fa fa-pencil',
            showStatus: true //只对 keep-source 开启有效，是否显示单元格值的修改状态
        },
        // 默认快捷菜单
        contextMenu: {
            body: {
                options: [
                    [
                        {
                            code: "copy",
                            name: "复制内容",
                            prefixIcon: "fa fa-copy",
                        },
                    ],
                ]
            }
        },
        customConfig: {
            storage: false
        },
        validConfig: {
            message: 'default'
        },
    },
    // 配置式表格的默认参数
    grid: {
        size: 'mini',
        zoomConfig: {
            escRestore: true
        },
        pagerConfig: {
            pageSize: 100,
            perfect: true
        },
        toolbar: {
            perfect: false,
            slots: {
                buttons: "toolbar_search",
                tools: "toolbar_buttons",
            },
        },
        proxyConfig: {
            autoLoad: true,
            message: true,
            props: {
                list: null, // 用于列表，读取响应数据
                result: 'rows', // 用于分页，读取响应数据
                total: 'records' // 用于分页，读取总条数
            },
            beforeItem: null,
            beforeColumn: null,
            beforeQuery: null,
            afterQuery: null,
            beforeDelete: null,
            afterDelete: null,
            beforeSave: null,
            afterSave: null
        }
    },
    // 默认 tooltip 主题样式
    tooltip: {
        trigger: 'hover',
        theme: 'dark'
    },
    // 默认分页参数
    pager: {
        size: 'mini',
        pageSize: 100,
        pagerCount: 7,
        pageSizes: [100, 200, 500, 800, 1000, 99999],
        layouts: ['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total'], // 非常灵活的分页布局，支持任意位置随意换
        autoHidden: true//当只有一页时自动隐藏
    },
    // 默认工具栏参数
    toolbar: {
        size: 'mini',
        refresh: false,
        //自定义列
        custom: {
            immediate: true
        },
        //全屏按钮
        // zoom: {
        //   iconIn: 'fa fa-arrows-alt',
        //   iconOut: 'fa fa-expand'
        // },
        buttons: []
    },
    // 默认模态窗口参数
    modal: {
        minWidth: 340,
        minHeight: 200,
        lockView: true,
        mask: true,
        duration: 3000,
        marginSize: 8,
        dblclickZoom: true,
        remember: false,
        animat: true,
        showTitleOverflow: true,
        storage: false,
        remember: true //记忆功能，会记住最后操作状态，再次打开窗口时还原窗口状态
    },
    // 默认优化配置项
    optimization: {
        animat: true,
        delayHover: 250,
        scrollX: {
            gt: 100
        },
        scrollY: {
            gt: 500
        }
    },
    form: {
        size: null,
        colon: false
    },
    // input: {
    //   size: null,
    //   transfer: false
    //   parseFormat: 'yyyy-MM-dd HH:mm:ss.SSS',
    //   labelFormat: '',
    //   valueFormat: '',
    //   startWeek: 1,
    //   digits: 2
    // },
    // textarea: {
    //   size: null
    //   autosize: {
    //     minRows: 1,
    //     maxRows: 10
    //   }
    // },
    // select: {
    //   size: null,
    //   transfer: false
    // },
    // button: {
    //     size: null,
    //     transfer: false
    // },
    // radio: {
    //   size: null
    // },
    // checkbox: {
    //   size: null
    // },
    // switch: {
    //   size: null
    // },
    icon: {
        // table
        TABLE_SORT_ASC: 'vxe-icon--caret-top',
        TABLE_SORT_DESC: 'vxe-icon--caret-bottom',
        TABLE_FILTER_NONE: 'vxe-icon--funnel',
        TABLE_FILTER_MATCH: 'vxe-icon--funnel',
        TABLE_EDIT: 'vxe-icon--edit-outline',
        TABLE_TREE_LOADED: 'vxe-icon--refresh roll',
        TABLE_TREE_OPEN: 'vxe-icon--caret-right rotate90',
        TABLE_TREE_CLOSE: 'vxe-icon--caret-right',
        TABLE_EXPAND_LOADED: 'vxe-icon--refresh roll',
        TABLE_EXPAND_OPEN: 'vxe-icon--arrow-right rotate90',
        TABLE_EXPAND_CLOSE: 'vxe-icon--arrow-right',

        // button
        BUTTON_DROPDOWN: 'vxe-icon--arrow-bottom',
        BUTTON_LOADING: 'vxe-icon--refresh roll',

        // select
        SELECT_OPEN: 'vxe-icon--caret-bottom rotate180',
        SELECT_CLOSE: 'vxe-icon--caret-bottom',

        // pager
        PAGER_JUMP_PREV: 'vxe-icon--d-arrow-left',
        PAGER_JUMP_NEXT: 'vxe-icon--d-arrow-right',
        PAGER_PREV_PAGE: 'vxe-icon--arrow-left',
        PAGER_NEXT_PAGE: 'vxe-icon--arrow-right',
        PAGER_JUMP_MORE: 'vxe-icon--more',

        // input
        INPUT_CLEAR: 'vxe-icon--close',
        INPUT_PWD: 'vxe-icon--eye-slash',
        INPUT_SHOW_PWD: 'vxe-icon--eye',
        INPUT_PREV_NUM: 'vxe-icon--caret-top',
        INPUT_NEXT_NUM: 'vxe-icon--caret-bottom',
        INPUT_DATE: 'vxe-icon--calendar',
        INPUT_SEARCH: 'vxe-icon--search',

        // modal
        MODAL_ZOOM_IN: 'vxe-icon--square',
        MODAL_ZOOM_OUT: 'vxe-icon--zoomout',
        MODAL_CLOSE: 'vxe-icon--close',
        MODAL_INFO: 'vxe-icon--info',
        MODAL_SUCCESS: 'vxe-icon--success',
        MODAL_WARNING: 'vxe-icon--warning',
        MODAL_ERROR: 'vxe-icon--error',
        MODAL_QUESTION: 'vxe-icon--question',
        MODAL_LOADING: 'vxe-icon--refresh roll',

        // toolbar
        TOOLBAR_TOOLS_REFRESH: 'vxe-icon--refresh',
        TOOLBAR_TOOLS_REFRESH_LOADING: 'vxe-icon--refresh roll',
        TOOLBAR_TOOLS_IMPORT: 'vxe-icon--upload',
        TOOLBAR_TOOLS_EXPORT: 'vxe-icon--download',
        TOOLBAR_TOOLS_ZOOM_IN: 'vxe-icon--zoomin',
        TOOLBAR_TOOLS_ZOOM_OUT: 'vxe-icon--zoomout',
        TOOLBAR_TOOLS_CUSTOM: 'vxe-icon--menu',

        // form
        FORM_PREFIX: 'vxe-icon--info',
        FORM_SUFFIX: 'vxe-icon--info',
        FORM_FOLDING: 'vxe-icon--arrow-top rotate180',
        FORM_UNFOLDING: 'vxe-icon--arrow-top'
    }
})
Vue.use(VXETable)
VXETable.use(VXETablePluginElement)
